<template>
	<view class="index">
		<!-- <Header class="trans" :style="isScroll===0 ? '' : 'display:none;'" ></Header> -->
		<!-- <Header  :class="{'trans':isScroll!==0}" ></Header> -->
		<Header class="trans" :class="{'headerHeight':isScroll!==0}" :style="isScroll===0 ? '' : 'opacity:0;height:0rpx;display:inline-flex;'" ></Header>
		<TabHeader :class="{'tabHeight':isScroll===1}"  :style="isScroll===1 ? '' : 'display:none;'"></TabHeader>
		<view class="tabList">
			<view class="tabTitle" :class="{'active':isChoose===0,'tabListActive':isScroll===1}" @click="isChoose=0">
				推荐
			</view>
			<view class="tabTitle" :class="{'active':isChoose===1,'tabListActive':isScroll===1}" @click="isChoose=1">
				即将上线
			</view>
			<view class="tabLine" :style="{'left':isChoose===0?'60rpx':'264rpx'}"></view>
		</view>
		<scroll-view :style="isScroll===0 ? '' : 'height:990rpx;'" @scrolltoupper="scrollTop" @scroll="scrolling" class="main" scroll-y="true" enable-flex>
			<view v-for="(item,index) in homeList" class="scrollItem" :key="item.id">
				<image class="itemImg" :src="item.imgUrl"></image>
				<view class="itemContents">
					<view class="itemTag" v-for="(tag,index) in item.tagData" :key="index" v-if="tag.data">
						<image class="tagImg" :src="tag.data.icon.medium_url"></image>
						<view class="tagText">{{tag.data.label}}</view>
					</view>
					<view class="itemName">{{item.title}}</view>
					<view class="itemText">{{item.contents}}</view>
					<view class="itemScore">
						<image class="scoreImg" src="../../static/start.png" ></image>
						<view class="scoreText">{{item.score}}</view>
					</view>
					<view v-if="userInfo.avatarUrl" class="deleteItem" @click="deleteItem(index)">
						<image src="../../static/more.png"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import {mapState} from 'vuex'
	export default {
		data() {
			return { 
				homeList:[],
				isChoose:0,
				isScroll:0
			}
		},
		mounted(){
			this.getHomeList()
		},
		methods:{
			async getHomeList(){
			// /getHomeData
			const result = await request('/getHomeData')
			result.forEach((item)=>{
				// let tagDate=item.app_summary.highlight_tags[1].data||{}
				let obj={
					imgUrl:item.image.url,
					title:item.title,
					contents:item.contents,
					id:item.app_summary.id,
					score:item.rating.score,//评分
					tagData:item.app_summary.highlight_tags
				}
				this.homeList.push(obj)
			})
			// console.log(this.homeList);
				
			},
			deleteItem(index){
				wx.showModal({
					title:"对此内容不感兴趣",
					content:"以后将不再推荐此类内容",
					success:(res)=>{
						// 确定的逻辑
						if(res.confirm){
							// 删除当前item
							this.homeList.splice(index,1)
						}
					},
				})
				
			},
			// 滚动监听
			scrolling(e){
				if(this.isScroll===1)return
				if(e.detail.scrollTop>20){
					this.isScroll=1
				}
				// console.log(this.isScroll);
			},
			// 监听触顶
			scrollTop(){
				this.isScroll=0
				// console.log(this.isScroll);
			}
			
		}
		,computed:{
			userInfo(){
				return uni.getStorageSync('userInfo_key')||{}
			}
		}
		
	}
</script>

<style lang="stylus">
	.index
		overflow hidden
		.tabList
			display flex
			position relative
			margin-bottom 10rpx
			transition all 1s
			// overflow hidden
			.tabTitle
				margin 0 36rpx
				padding 10rpx
				font-size 32rpx
				line-height: 60rpx
				color #868c92
				&.active
					font: 700 44rpx ""
					color black
			.tabListActive
					margin -28rpx 36rpx 12rpx 36rpx !important
			.tabLine
				position: absolute;
				transition: left 1s
				bottom: 0px;
				z-index: 1;
				width: 60rpx;
				height: 6rpx;
				background-color: #14b9c8;
				border-radius: 3px;
		.main
			width calc(100vw - 64rpx)
			height calc(100vh - 200rpx)
			width 100%
			.scrollItem
				overflow hidden
				width calc(100vw - 64rpx)
				margin 30rpx auto
				box-shadow: 0 35rpx 35rpx  rgb(230 230 230);
				// box-shadow: -5px 5px 10px -4px red, 5px 5px 10px -4px red;
				border-radius 20rpx
				.itemImg
					height 360rpx
					width 100%
				.itemContents
					position relative
					padding: 24rpx 24rpx 32rpx 24rpx
					overflow hidden
					.itemName
						color black
						font 700 38rpx ""
						line-height 48rpx
						margin-bottom 10rpx
					.itemText
						width 90%
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:1;
						overflow:hidden;
						color #000000
						font-size 26rpx
					.itemScore
						position absolute
						display flex
						align-items center
						right 32rpx
						top 19rpx
						// line-height 48rpx
						.scoreText
							color #14b9c8
							font 700 38rpx ""
						.scoreImg
							width 36rpx
							height 36rpx
							margin-right 10rpx
					.itemTag
						display inline-flex
						border 1rpx solid #14b9c8
						height 30rpx
						padding 0rpx 12rpx
						border-radius 8rpx
						line-height 30rpx
						margin-right 10rpx
						.tagText
							color #14b9c8
							font 600 24rpx ""
						.tagImg
							width 30rpx
							height 30rpx
					.deleteItem
						position absolute
						bottom 10rpx
						right 15rpx
						image
							height 54rpx
							width 54rpx
		.trans
			// position absolute
			// top -100%
			// position relative
			// top 0
			opacity 1
			height 104rpx
			transition all .3s
			margin-bottom -20rpx
		.headerHeight
			.header
				height 0 !important
			image
				display none
		.tabHeight
			.tabHeader
				margin -44rpx 32rpx
		
			
			
		
			
						
						
					
				
</style>
			